<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            top: 50px;
        }

        .nav ul {
            list-style-type: none;
            display: flex;
            gap: 10px;
        }

        .nav ul li {
            cursor: pointer;
            display: inline-block;
            text-align: center;
            height: 30px;
            box-shadow: 0 0 5px;
        }

        .nav ul li:hover {
            background-color: #FF0000;
        }

        .ative {
            background-color: #FF0000;
            color: white;
        }

        .p {
            position: relative;
            top: 50px;
            width: 100%;
            height: 500px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .son {
            box-shadow: 0 0 10px;
            width: 260px;
            height: 360px;
            padding: 10px;
        }

        .son img {
            width: 100%;
            height: 260px;
        }
    </style>
</head>

<body>
    <div class="w">
        <nav class="nav">
            <ul> </ul>
        </nav>
        <div class="p"> </div>
    </div>

    <script src="./axios.min.js"></script>
   <script>
        let ul = document.querySelector('.nav>ul')
        let p = document.querySelector('.p')
        //使用axios发送请求渲染标头
        axios({
            method: 'get',
            url: 'http://playlet.zonelian.com/api/category/list',
            params: {
                zlsj: "zlsj"
            }
        }
        ).then(res => {
            let data = res.data.data.data
            // 渲染页面
            // let str = ''
            data.forEach((item, index) => {
                // str += `<li>${item.name}</li>`
                let li = document.createElement('li')
                li.innerText = item.name
                li.dataset.name_en = item.name_en
                if (index == 0) {
                    li.className = 'ative'
                    getSondata(li)
                }
                ul.appendChild(li)
            })
        })

        //点击事件
        ul.addEventListener('click', e => {
            let li = e.target
            //判断是不是ul标签
            if (li.nodeName == 'UL') return
            let lis = ul.children
            for (let i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
            li.className = 'ative'
            getSondata(li)
        })
        function getSondata(li) {
            axios({
                method: 'get',
                url: 'https://playlet.zonelian.com/api/playlet/list',
                params: {
                    name_en: li.dataset.name_en,
                    page: 1,
                    limit: 10,
                    zlsj: "zlsj"
                }
            }
            ).then(res => {
                p.innerHTML = ''
                let data = res.data.data.data
                console.log(data);
                data.forEach(item => {
                    let son = document.createElement('div')
                    son.className = 'son'
                    let description = document.createElement('p')
                    let title = document.createElement('p')
                    let img = document.createElement('img')
                    description.innerText = item.description
                    title.innerText = item.title
                    title.style.fontSize = '20px'
                    title.style.fontWeight = 'bold'
                    img.src = item.img
                    son.appendChild(img)
                    son.appendChild(title)
                    son.appendChild(description)
                    p.appendChild(son)
                })
            })
        }

    </script>
</body>

</html>